<template>
  <!-- 系统管理 -->
  <div class="app-container">
    <div class="mainbox">
      <!-- 顶部操作 -->
      <div class="filter-container">
        <div class="temInfoBar flex-1">
          <div class="">模板名称：{{info.tempName}}</div>
          <p v-show="!!info.tempDescription">模板描述：{{info.tempDescription}}</p>
        </div>
        <el-button
          icon="el-icon-folder-add"
          type="primary"
          @click="$_handleImport()"
        >
          导入并评估
        </el-button>
        <el-button
          icon="el-icon-folder-remove"
          @click="handleExport()"
        >
          下载模板
        </el-button>
      </div>
      <!-- 表格 -->
      <div class="table-container table-fullscreen">
        <div class="infoTit">模板指标</div>
        <el-table
          ref="table"
          v-loading="MX_listLoading"
          :data="info.indexDtos"
          border
          highlight-current-row
          :row-key="$_getRowKey"
          style="width: 100%;text-align:center"
          :header-cell-style="MX_headerCellStyle"
        >
          <template slot="empty">
            <p>{{ $store.getters.dataText }}</p>
          </template>
          <el-table-column
            fixed="left"
            type="index"
            label="序号"
            width="70"
            align="center"
            :index="$_tableIndex"
          />
          <el-table-column
            v-for="item in columns"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :formatter="item.formatter"
            align="center"
          />
        </el-table>
      </div>
      <dtDialog
        title="导入"
        class="get-page-form-import-dialog"
        :visible.sync="MX_fileUploadVisible"
        width="620px"
        :is-loading="MX_uploadLoading"
        @closeDialog="MX_fileUploadVisible = false"
        @comfirmBtn="$_importDataSave(importApi, {id: parentId}, () => importSuccessBack())"
      >
        <el-form slot="content">
          <div class="">
            <dt-importFile ref="dtImportFileRef" :down-load-template="handleImportTemplate" :type="fileName" />
          </div>
        </el-form>
      </dtDialog>
    </div>
  </div>
</template>
<script>
import commonList from "@/utils/mixins/investment/commonList";
import intservApi from "@/api/investment/intserv";

export default {
  name: 'ProjectRelease',
  dicts: ['zs_zycy'],
  mixins: [commonList],
  data() {
    return {
      parentId: '',
      info: {},
      fileName: '评估数据导入',
      handleImportTemplate: intservApi.exportProjectEvaTemp,
      importApi: intservApi.importProjectEvaTemp,
      // 列信息
      columns: [
        { prop: 'indexName', label: '指标名称', minWidth: '200px' },
        { prop: 'unit', label: '计量单位', width: '140px' },
        { prop: 'weight', label: '权重', width: '140px' },
        { prop: 'planValue', label: '计划值', minWidth: '200px' }
      ]
    }
  },
  watch: {
    parentId(val, old){
      if (val !== old){
        this.getDetail()
      }
    }
  },
  created() {
    if (!this.$route.query.id){
      this.$message.error('请带入模板数据标识！')
      return
    }
    this.parentId = this.$route.query.id
  },
  activated() {
    this.parentId = this.$route.query.id
  },
  methods: {
    getDetail(){
      const loading = this.$loading({
        lock: true,
        text: `查询中...`,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      intservApi.detailProjectEvaTemp({id: this.parentId}).then((res) => {
        this.info = res.data
        loading.close()
      }).catch((r) => {
        loading.close()
      })
    },
    /** 下载按钮操作 */
    handleExport() {
      this.$_handleDownload(this.handleImportTemplate, `${this.fileName}模板`, {id: this.parentId});
    },
    importSuccessBack(){
      this.$dtMessageBox({ title: '提示', message: '导入并评估成功！', confirmButtonText: '查看评估结果' }).then(() => {
        this.$router.push(`/investment/intserv/HistoryEva`)
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.tBtn{
  margin-top: 3px;
  margin-bottom: 3px;
}
.temInfoBar div,
.infoTit {
  font-weight: 600;
  color: #1f2f3d;
  font-size: 18px;
}
.temInfoBar{
  p{
    margin-bottom: 0;
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
  }
}
.temInfoBar,
.infoTit{
  margin-bottom: 16px;
}
</style>
